<template>
  <main class="flex flex-col h-full relative overflow-hidden">
    <!-- 主内容区域 -->
    <div class="main-content">
      <div class="welcome-card">
        <h1 class="welcome-title">
          <i class="fas fa-industry"></i>
          设备信息监控
          <span class="data-source-indicator" :class="apiResponse ? 'real-time' : 'default'">
            {{ apiResponse ? '实时数据' : '默认数据' }}
          </span>
          <span v-if="isAutoRefreshEnabled" class="auto-refresh-indicator">
            <i class="fas fa-sync-alt fa-spin"></i>
            自动刷新
          </span>
          <div class="title-controls">
            <button @click="toggleAutoRefresh" class="auto-refresh-btn" :class="isAutoRefreshEnabled ? 'auto-refresh-active' : 'auto-refresh-inactive'" :disabled="isRefreshing">
              <i :class="getRefreshButtonIcon()"></i>
              {{ getRefreshButtonText() }}
            </button>
            <button @click="openConfigModal" class="config-button">
              <i class="fas fa-cog"></i>
              修改地址
            </button>
          </div>
        </h1>
        
        <!-- 设备基本信息 -->
        <div class="device-info">
          <div class="info-item">
            <span class="info-label">设备名称:</span>
            <span class="info-value">{{ displayData.ft_name }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">设备编号:</span>
            <span class="info-value">{{ displayData.ft_serial }}</span>
          </div>
        </div>

        <!-- 当前加工信息 -->
        <div class="process-info">
          <h3 class="section-subtitle">当前加工信息</h3>
          <div class="process-grid">
            <div class="process-item">
              <span class="process-label">产品机种:</span>
              <span class="process-value">{{ getSafeQueryData('ar_name') }}</span>
            </div>
            <div class="process-item">
              <span class="process-label">产品条码:</span>
              <span class="process-value">{{ getSafeQueryData('sequence') }}</span>
            </div>
            <div class="process-item">
              <span class="process-label">工单名称:</span>
              <span class="process-value">{{ getSafeQueryData('tk_name') }}</span>
            </div>
            <div class="process-item">
              <span class="process-label">请求类型:</span>
              <span class="process-value">{{ getSafeQueryData('request_kind') }}</span>
            </div>
          </div>
          
          <!-- 测试数据信息 -->
          <div class="test-data-section" v-if="getTestData().length > 0">
            <h4 class="test-subtitle">测试数据</h4>
            <div class="test-list">
              <div v-for="(testItem, index) in getTestData()" :key="index" class="test-row">
                <span class="test-name">{{ testItem.key || '未知测试项' }}</span>
                <span class="test-values-inline">
                  测试值:{{ testItem.value || '0' }}
                  下限:{{ testItem.floor || '0' }}
                  上限:{{ testItem.upper || '0' }}
                  {{ getTestQualityMsg() }}
                </span>
              </div>
            </div>
          </div>
          
          <!-- 状态信息 -->
          <div class="status-info">
            <div class="status-item">
              <span class="status-label">加工状态:</span>
              <span class="status-value" :class="getStatusClass()">
                {{ getSafeQueryData('message_bool') === true ? '允许加工' : '禁止加工' }}
              </span>
            </div>
            <div class="status-item">
              <span class="status-label">状态说明:</span>
              <span class="status-message">{{ getSafeQueryData('message_string') }}</span>
            </div>
            <div class="status-item">
              <span class="status-label">加工时间:</span>
              <span class="status-time">{{ getSafeQueryData('time') }}</span>
            </div>
          </div>
        </div>
        

      </div>
    </div>
    

  </main>

  <!-- 配置弹窗 -->
  <div v-if="showConfigModal" class="modal-overlay" @click="closeModal">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <h2 class="modal-title">
          <i class="fas fa-cog"></i>
          接口配置
        </h2>
        <button @click="closeModal" class="close-button">
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <div class="modal-body">
        <form @submit.prevent="saveConfigOnly">
          <div class="form-group">
            <label for="address" class="form-label">接口地址</label>
            <div class="input-wrapper">
              <i class="fas fa-globe input-icon"></i>
              <input
                  type="text"
                  id="address"
                  v-model="formData.address"
                  class="form-input"
                  placeholder="请输入接口地址 (如: http://118.24.138.196)"
                  required
              />
            </div>
          </div>
          <div class="form-group">
            <label for="port" class="form-label">端口号</label>
            <div class="input-wrapper">
              <i class="fas fa-ethernet input-icon"></i>
              <input
                  type="number"
                  id="port"
                  v-model="formData.port"
                  class="form-input"
                  placeholder="请输入端口号 (如: 8080)"
                  min="1"
                  max="65535"
                  required
              />
            </div>
          </div>
          <div class="form-group">
            <label for="facility" class="form-label">选择设备</label>
            <div class="input-wrapper">
              <i class="fas fa-building input-icon"></i>
              <select
                  id="facility"
                  v-model="formData.facility_id"
                  class="form-input"
                  required
              >
                <option value="" disabled>请选择设备</option>
                <option 
                  v-for="facility in facilityList" 
                  :key="facility.facility_id" 
                  :value="facility.facility_id"
                >
                  {{ facility.name }} ({{ facility.serials }})
                </option>
              </select>
            </div>
            <button 
              @click="loadFacilityList" 
              type="button" 
              class="load-facilities-btn"
              :disabled="isLoadingFacilities || !canLoadFacilities"
            >
              <i :class="isLoadingFacilities ? 'fas fa-spinner fa-spin' : 'fas fa-sync-alt'"></i>
              {{ isLoadingFacilities ? '加载中...' : (canLoadFacilities ? '刷新设备列表' : '请先配置地址和端口') }}
            </button>
          </div>
        </form>
      </div>
      
      <div class="modal-footer">
        <button @click="saveConfigOnly" class="hmi-button hmi-button-primary">
          <i class="fas fa-save"></i>
          保存配置
        </button>
        <button @click="closeModal" class="hmi-button hmi-button-secondary">
          <i class="fas fa-times"></i>
          取消
        </button>
      </div>
    </div>
  </div>

  <div
      id="notification"
      class="notification-dialog"
      :class="{ show: notification.visible, 'notification-success': notification.type === 'success', 'notification-error': notification.type === 'error' }"
      v-show="notification.visible"
  >
    <div class="notification-content">
      <i :class="notification.type === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-circle'"
         class="notification-icon"></i>
      <span id="notification-message">{{ notification.message }}</span>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted, onUnmounted, computed} from 'vue';
import {useRouter} from 'vue-router';


const router = useRouter();

// --- 响应式数据 ---
const formData = reactive({
  address: 'http://118.24.138.196',
  port: 9005,
  facility_id: 1  // 默认设施ID
});

const isConnecting = ref(false); // 连接按钮状态
const isTesting = ref(false); // 测试按钮状态
const isRefreshing = ref(false); // 刷新按钮状态
const isLoadingFacilities = ref(false); // 加载设施列表状态
const apiResponse = ref(null); // 存储API响应数据
const showConfigModal = ref(false); // 控制配置弹窗显示
const facilityList = ref([]); // 设施列表
const dataRefreshTimer = ref(null); // 数据刷新定时器
const isAutoRefreshEnabled = ref(false); // 自动刷新状态

// 默认显示数据
const defaultData = {
  ft_name: "预装区(激光打铭牌)",
  ft_serial: "XHD01-01",
  query_single: [
    {
      ar_name: "SK151-1",
      message_bool: false,
      message_string: "机种配方不一致, 禁止加工",
      request_kind: "PLC请求",
      sequence: "EO24060100123",
      time: "2025-01-15 14:25:33",
      tk_name: "TK20250115001"
    }
  ],
  query_test: [
    {
      test_quality_msg: "测试合格",
      test_items_array: [
        {
          key: "电阻测试",
          value: "125.6",
          floor: "120.0",
          upper: "130.0"
        },
        {
          key: "电压测试", 
          value: "3.28",
          floor: "3.20",
          upper: "3.35"
        },
        {
          key: "电流测试",
          value: "2.15",
          floor: "2.10", 
          upper: "2.20"
        },
        {
          key: "温度测试",
          value: "25.3",
          floor: "20.0",
          upper: "30.0"
        },
        {
          key: "绝缘测试",
          value: "999.8",
          floor: "500.0",
          upper: "1000.0"
        }
      ]
    }
  ]
};

// 用于显示的数据，有API响应时只使用API数据，否则使用默认数据
const displayData = computed(() => {
  if (apiResponse.value) {
    // 有API响应时，只使用API返回的真实数据，不混合默认数据
    // API返回格式: {data: [{facility_id, ft_name, ft_serial, query_single, ...}], status: 200}
    const responseData = apiResponse.value.data && apiResponse.value.data.length > 0 ? apiResponse.value.data[0] : null;
    
    return {
      ft_name: responseData?.ft_name || "未知设备",
      ft_serial: responseData?.ft_serial || "未知编号",
      query_single: responseData?.query_single && responseData.query_single.length > 0 ? responseData.query_single : [{}]
    };
  }
  
  // 只有在没有API响应时才使用默认数据
  return defaultData;
});

const notification = reactive({
  visible: false,
  message: '',
  type: 'success'
});

// 隐藏图标点击次数
const iconClickCount = ref(0);

// 检查是否可以加载设备列表
const canLoadFacilities = computed(() => {
  return formData.address && formData.port;
});

// 关闭弹窗
const closeModal = () => {
  showConfigModal.value = false;
};

// 打开配置弹窗
const openConfigModal = () => {
  showConfigModal.value = true;
  // 如果已有有效配置，则加载设备列表
  if (formData.address && formData.port) {
    loadFacilityList();
  }
};

// 启动自动刷新定时器
const startAutoRefresh = () => {
  // 如果已有定时器，先清除
  if (dataRefreshTimer.value) {
    clearInterval(dataRefreshTimer.value);
  }
  
  // 设置5秒定时器
  dataRefreshTimer.value = setInterval(() => {
    if (!isTesting.value && !isRefreshing.value) {
      console.log('自动刷新数据...');
      testInteractionAPI();
    }
  }, 5000);
  
  isAutoRefreshEnabled.value = true;
  console.log('已启动自动刷新，每5秒更新一次数据');
};

// 停止自动刷新定时器
const stopAutoRefresh = () => {
  if (dataRefreshTimer.value) {
    clearInterval(dataRefreshTimer.value);
    dataRefreshTimer.value = null;
  }
  isAutoRefreshEnabled.value = false;
  console.log('已停止自动刷新');
};

// 切换自动刷新
const toggleAutoRefresh = () => {
  if (isAutoRefreshEnabled.value) {
    stopAutoRefresh();
    console.log('已停止自动刷新');
  } else {
    startAutoRefresh();
    console.log('已启动自动刷新');
  }
};

// 获取刷新按钮图标
const getRefreshButtonIcon = () => {
  if (isRefreshing.value) {
    return 'fas fa-spinner fa-spin';
  }
  return isAutoRefreshEnabled.value ? 'fas fa-stop' : 'fas fa-sync-alt';
};

// 获取刷新按钮文本
const getRefreshButtonText = () => {
  if (isRefreshing.value) {
    return '刷新中...';
  }
  return isAutoRefreshEnabled.value ? '停止自动刷新' : '启动自动刷新';
};

// 获取状态样式类
const getStatusClass = () => {
  const queryData = displayData.value?.query_single?.[0];
  if (!queryData) return 'status-forbidden';
  const status = queryData.message_bool;
  return status ? 'status-allowed' : 'status-forbidden';
};

// 获取安全的查询数据
const getSafeQueryData = (field, defaultValue = '-') => {
  const queryData = displayData.value?.query_single?.[0];
  if (!queryData || queryData[field] === undefined || queryData[field] === null) {
    return defaultValue;
  }
  return queryData[field];
};

// 获取测试数据
const getTestData = () => {
  // 如果有API响应，只使用API数据，不使用默认数据
  if (apiResponse.value) {
    if (apiResponse.value.data && apiResponse.value.data.length > 0) {
      const deviceData = apiResponse.value.data[0];
      if (deviceData.query_test && deviceData.query_test.length > 0) {
        const testData = deviceData.query_test[0];
        if (testData.test_items_array && Array.isArray(testData.test_items_array)) {
          return testData.test_items_array;
        }
      }
    }
    // API响应存在但没有测试数据时，返回空数组
    return [];
  }
  
  // 只有在没有API响应时才返回默认测试数据
  if (defaultData.query_test && defaultData.query_test.length > 0) {
    const testData = defaultData.query_test[0];
    if (testData.test_items_array && Array.isArray(testData.test_items_array)) {
      return testData.test_items_array;
    }
  }
  
  return [];
};

// 获取测试质量信息
const getTestQualityMsg = () => {
  // 如果有API响应，只使用API数据，不使用默认数据
  if (apiResponse.value) {
    if (apiResponse.value.data && apiResponse.value.data.length > 0) {
      const deviceData = apiResponse.value.data[0];
      if (deviceData.query_test && deviceData.query_test.length > 0) {
        const testData = deviceData.query_test[0];
        return testData.test_quality_msg || '';
      }
    }
    // API响应存在但没有测试质量信息时，返回空字符串
    return '';
  }
  
  // 只有在没有API响应时才返回默认测试质量信息
  if (defaultData.query_test && defaultData.query_test.length > 0) {
    const testData = defaultData.query_test[0];
    return testData.test_quality_msg || '';
  }
  
  return '';
};

// 显示通知
const showNotification = (message, type = 'success') => {
  notification.message = message;
  notification.type = type;
  notification.visible = true;
  
  // 自动隐藏通知
  setTimeout(() => {
    notification.visible = false;
  }, 3000);
};

// 验证IP地址格式
const isValidIP = (ip) => {
  const ipRegex = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;
  return ipRegex.test(ip) || ip === 'localhost';
};

// 保存配置到本地存储
const saveConfig = (address, port, facility_id) => {
  try {
    const config = {
      address: address,
      port: port,
      facility_id: facility_id,
      timestamp: Date.now()
    };
    localStorage.setItem('interfaceConfig', JSON.stringify(config));
  } catch (error) {
    console.error('保存配置失败:', error);
  }
};

// 从本地存储加载配置
const loadConfig = () => {
  try {
    const config = localStorage.getItem('interfaceConfig');
    if (config) {
      const parsedConfig = JSON.parse(config);
      formData.address = parsedConfig.address || 'http://118.24.138.196';
      formData.port = parsedConfig.port || 9005;
      formData.facility_id = parsedConfig.facility_id || 1;
    }
  } catch (error) {
    console.error('加载配置失败:', error);
  }
};

// 刷新数据
const refreshData = async () => {
  isRefreshing.value = true;
  await testInteractionAPI();
  isRefreshing.value = false;
};

// 仅保存配置
const saveConfigOnly = () => {
  // 客户端验证
  if (!formData.address) {
    showNotification('请输入接口地址', 'error');
    return;
  }

  if (!formData.port) {
    showNotification('请输入端口号', 'error');
    return;
  }

  if (!formData.facility_id) {
    showNotification('请选择设备', 'error');
    return;
  }
  
  // 保存配置
  saveConfig(formData.address, formData.port, formData.facility_id);
  showNotification('配置已保存，启动自动刷新!', 'success');
  
  // 关闭弹窗
  showConfigModal.value = false;
  
  // 启动自动刷新
  startAutoRefresh();
};

// 测试交互接口
const testInteractionAPI = async () => {
  if (!formData.address) {
    showNotification('请先配置接口地址', 'error');
    return;
  }

  if (!formData.port) {
    showNotification('请先配置端口号', 'error');
    return;
  }

  isTesting.value = true;

  try {
    // 构建完整的API地址
    const baseUrl = formData.address.includes('://') 
      ? formData.address 
      : `http://${formData.address}`;
    const apiUrl = `${baseUrl}:${formData.port}/api/interaction?facility_id=${formData.facility_id}`;
    
    console.log('正在调用接口:', apiUrl);
    
    const response = await fetch(apiUrl, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      // 设置超时时间
      signal: AbortSignal.timeout(10000) // 10秒超时
    });

    if (response.ok) {
      const data = await response.json();
      console.log('接口响应原始数据:', data);
      
      // 存储响应数据
      apiResponse.value = data;
      console.log('✅ API调用成功，已切换到API数据模式，默认数据已清除');
      
      // 检查数据结构并提供反馈
      if (data.data && data.data.length > 0 && data.data[0]) {
        console.log('解析到的设备数据:', data.data[0]);
        
        // 记录成功反馈到控制台
        const deviceName = data.data[0].ft_name || '未知设备';
        const deviceSerial = data.data[0].ft_serial || '未知编号';
        console.log(`数据更新成功！设备: ${deviceName} (${deviceSerial})`);
        
        // 如果有查询数据，显示当前状态
        const deviceData = data.data[0];
        if (deviceData.query_single && deviceData.query_single.length > 0) {
          const currentItem = deviceData.query_single[0];
          const productType = currentItem.ar_name || '未知产品';
          const isAllowed = currentItem.message_bool ? '允许' : '禁止';
          console.log(`当前产品: ${productType}, 加工状态: ${isAllowed}加工`);
        }
      } else {
        console.warn('API响应中没有有效的设备数据');
        showNotification('接口返回数据格式异常，但已保存响应', 'error');
        console.error('API返回的数据结构不符合预期:', data);
      }
      
    } else {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
  } catch (error) {
    console.error('接口调用失败:', error);
    // 清除之前的API数据，显示默认数据
    apiResponse.value = null;
    console.log('⚠️ API调用失败，已切换回默认数据模式');
    if (error.name === 'TimeoutError') {
      showNotification('接口调用超时，显示默认数据', 'error');
    } else if (error.name === 'TypeError') {
      showNotification('网络连接失败，显示默认数据', 'error');
    } else {
      showNotification(`接口调用失败: ${error.message}，显示默认数据`, 'error');
    }
  } finally {
    isTesting.value = false;
  }
};

// 处理连接表单提交
const handleConnect = async () => {
  // 客户端验证
  if (!formData.address) {
    showNotification('请输入接口地址', 'error');
    return;
  }

  if (!formData.port) {
    showNotification('请输入端口号', 'error');
    return;
  }

  if (!formData.facility_id) {
    showNotification('请选择设备', 'error');
    return;
  }

  isConnecting.value = true;
  
  // 保存配置
  saveConfig(formData.address, formData.port, formData.facility_id);
  showNotification('连接成功!', 'success');
  
  // 关闭弹窗
  showConfigModal.value = false;
  
  // 直接跳转到主页面
  navigateToMainMenu();
};

// 导航到主菜单
const navigateToMainMenu = () => {
  router.push('/index');
};

// 获取设备列表
const loadFacilityList = async () => {
  if (!formData.address || !formData.port) {
    showNotification('请先配置接口地址和端口', 'error');
    return;
  }

  isLoadingFacilities.value = true;

  try {
    // 构建完整的API地址
    const baseUrl = formData.address.includes('://') 
      ? formData.address 
      : `http://${formData.address}`;
    const apiUrl = `${baseUrl}:${formData.port}/api/query/facility?index=1&size=50`;
    
    console.log('正在加载设备列表:', apiUrl);
    
    const response = await fetch(apiUrl, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      // 设置超时时间
      signal: AbortSignal.timeout(10000) // 10秒超时
    });

    if (response.ok) {
      const data = await response.json();
      console.log('设备列表响应:', data);
      
      // 检查数据结构
      if (data.data && Array.isArray(data.data)) {
        facilityList.value = data.data;
        console.log(`成功加载 ${data.data.length} 个设备`);
        
        // 优先选择默认设备，否则保持当前选择或选择第一个设备
        if (facilityList.value.length > 0) {
          const defaultFacility = facilityList.value.find(facility => facility.default === true);
          if (defaultFacility) {
            formData.facility_id = defaultFacility.facility_id;
            console.log(`自动选择默认设备: ${defaultFacility.name} (ID: ${defaultFacility.facility_id})`);
          } else {
            // 如果当前选中的设备不在列表中，选择第一个设备
            const currentFacilityExists = facilityList.value.some(facility => facility.facility_id === formData.facility_id);
            if (!currentFacilityExists) {
              formData.facility_id = facilityList.value[0].facility_id;
              console.log(`选择第一个设备: ${facilityList.value[0].name} (ID: ${facilityList.value[0].facility_id})`);
            }
          }
        }
      } else {
        console.warn('设备列表数据格式异常:', data);
        showNotification('设备列表数据格式异常', 'error');
      }
      
    } else {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
  } catch (error) {
    console.error('加载设备列表失败:', error);
    if (error.name === 'TimeoutError') {
      showNotification('加载设备列表超时', 'error');
    } else if (error.name === 'TypeError') {
      showNotification('网络连接失败，无法加载设备列表', 'error');
    } else {
      showNotification(`加载设备列表失败: ${error.message}`, 'error');
    }
  } finally {
    isLoadingFacilities.value = false;
  }
};

// --- 生命周期钩子 ---
onMounted(() => {
  // 先清除旧配置，确保使用新的默认值
  localStorage.removeItem('interfaceConfig');
  loadConfig();
  
  // 页面加载时自动获取数据
  testInteractionAPI();
});

onUnmounted(() => {
  // 清理定时器
  stopAutoRefresh();
});
</script>

<style scoped>
/* 页面布局 */
.main-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.welcome-title {
  font-size: 2.6vh;
  margin-bottom: 1.5vh;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
  flex-shrink: 0;
  flex-wrap: wrap;
  position: relative;
}

.title-controls {
  display: flex;
  gap: 0.8vw;
  margin-left: 1vw;
  align-items: center;
}

/* 按钮样式 */

.config-button,
.auto-refresh-btn {
  padding: 0.6vh 1vw;
  font-size: 1.4vh;
  gap: 0.5vw;
}

.config-button {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  padding: 0.6vh 1vw;
  background-color: var(--accent-blue);
  color: white;
  border: none;
  border-radius: 0.5vw;
  font-size: 1.4vh;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0.2vh 0.5vh rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.config-button:hover {
  background-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.auto-refresh-btn {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  padding: 0.6vh 1vw;
  border: none;
  border-radius: 0.5vw;
  font-size: 1.4vh;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0.2vh 0.5vh rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.auto-refresh-inactive {
  //background-color: var(--accent-green, #10b981);
  color: white;
}

.auto-refresh-inactive:hover:not(:disabled) {
  background-color: #059669;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.auto-refresh-active {
  background-color: #ef4444;
  color: white;
}

.auto-refresh-active:hover:not(:disabled) {
  background-color: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.auto-refresh-btn:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 欢迎卡片 */
.welcome-card {
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  border-radius: 1.5vw;
  box-shadow: 0 1.5vh 6vh rgba(0, 0, 0, 0.1), 0 0.6vh 3.5vh rgba(0, 0, 0, 0.07);
  padding: 2vh 2vw;
  border: 1px solid #e2e8f0;
  width: 90vw;
  max-width: 85vw;
  height: 90vh;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.welcome-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4, #10b981);
  border-radius: 1.2rem 1.2rem 0 0;
}

.data-source-indicator {
  font-size: 1.3vh;
  font-weight: 500;
  padding: 0.4vh 0.8vw;
  border-radius: 1.5vw;
  margin-left: 0.8vw;
  border: 1px solid;
}

.data-source-indicator.real-time {
  background-color: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}

.data-source-indicator.default {
  background-color: #fff3cd;
  color: #856404;
  border-color: #ffeaa7;
}

.auto-refresh-indicator {
  font-size: 1.3vh;
  font-weight: 600;
  padding: 0.3vh 0.6vw;
  border-radius: 1.2vw;
  margin-left: 0.8vw;
  background: linear-gradient(135deg, #e1f5fe, #b3e5fc);
  color: #0277bd;
  border: 1px solid #81d4fa;
  display: flex;
  align-items: center;
  gap: 0.4vw;
  box-shadow: 0 0.2vh 0.5vh rgba(0, 0, 0, 0.1);
}

.device-info {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border-radius: 1vw;
  padding: 1.5vh 1.5vw;
  margin-bottom: 1.5vh;
  border: 1px solid #bbf7d0;
  flex-shrink: 0;
  box-shadow: 0 0.4vh 1vh rgba(16, 185, 129, 0.1);
  position: relative;
}

.device-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10b981, #34d399);
  border-radius: 0.8rem 0.8rem 0 0;
}

.device-info .info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e9ecef;
}

.device-info .info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 2.1vh;
}

.info-value {
  font-family: 'Microsoft YaHei', sans-serif;
  color: #1f2937;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  padding: 0.5vh 1.2vw;
  border-radius: 0.6vw;
  font-size: 2.1vh;
  font-weight: 600;
  border: 1px solid #bbf7d0;
  box-shadow: 0 0.2vh 0.5vh rgba(0, 0, 0, 0.1);
}

.process-info {
  margin-bottom: 2vh;
  flex: 1;
  min-height: 0;
}

.section-subtitle {
  font-size: 2.4vh;
  font-weight: 700;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5vh;
  text-align: center;
  flex-shrink: 0;
  letter-spacing: 0.025em;
}

.process-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1vw;
  margin-bottom: 2vh;
}

.process-item {
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  padding: 1.2vh 1vw;
  border-radius: 0.8vw;
  border: 1px solid #e2e8f0;
  box-shadow: 0 0.4vh 1vh rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  position: relative;
}

.process-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-color: #c7d2fe;
}

.process-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #06b6d4);
  border-radius: 0.6rem 0.6rem 0 0;
}

.process-label {
  display: block;
  font-size: 1.8vh;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 0.6vh;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.process-value {
  font-size: 2.4vh;
  font-weight: 600;
  color: #1565c0;
  font-family: 'Consolas', 'Monaco', monospace;
}

.process-value:hover {
  background: linear-gradient(135deg, #bbdefb, #90caf9);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(21, 101, 192, 0.15);
}

.status-info {
  background: linear-gradient(135deg, #ffffff, #fafafa);
  border-radius: 1vw;
  padding: 0 1.5vw;
  border: 1px solid #e5e7eb;
  box-shadow: 0 0.4vh 1vh rgba(0, 0, 0, 0.05);
  position: relative;
}

.status-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  border-radius: 0.8rem 0.8rem 0 0;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1vh 0;
  border-bottom: 1px solid #f0f0f0;
}

.status-item:last-child {
  border-bottom: none;
}

.status-label {
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 6vw;
  font-size: 1.8vh;
}

.status-value {
  padding: 0.3vh 1vw;
  border-radius: 1vw;
  font-size: 1.6vh;
  font-weight: 600;
  text-align: center;
  min-width: 5vw;
}

.status-allowed {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status-forbidden {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.status-message {
  color: #374151;
  font-size: 1.7vh;
  font-weight: 500;
  max-width: 60%;
  text-align: right;
  word-break: break-all;
  line-height: 1.4;
  background: linear-gradient(135deg, #fef3f2, #fee2e2);
  padding: 0.5vh 0.8vw;
  border-radius: 0.5vw;
  border: 1px solid #f9a8a6;
}

.status-time {
  color: #6b7280;
  font-size: 1.7vh;
  font-family: 'Consolas', 'Monaco', monospace;
  font-weight: 500;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  padding: 0.5vh 0.8vw;
  border-radius: 0.5vw;
  border: 1px solid #bae6fd;
}

/* 测试数据样式 */
.test-data-section {
  margin-bottom: 1.5vh;
}

.test-subtitle {
  font-size: 2.4vh;
  font-weight: 700;
  background: linear-gradient(135deg, #10b981, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1vh;
  text-align: center;
  flex-shrink: 0;
  letter-spacing: 0.025em;
}

.test-list {
  display: flex;
  flex-direction: column;
  max-height: 35vh;
  overflow-y: auto;
  gap: 0.8vh;
}

/* 滚动条样式 */
.test-list::-webkit-scrollbar {
  width: 6px;
}

.test-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.test-list::-webkit-scrollbar-thumb {
  background: #10b981;
  border-radius: 3px;
}

.test-list::-webkit-scrollbar-thumb:hover {
  background: #059669;
}

.test-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8vh;
  padding: 1.2vh 1.5vw;
  background: linear-gradient(135deg, #ffffff, #f9fafb);
  border: 1px solid #e5e7eb;
  border-radius: 0.8vw;
  box-shadow: 0 0.4vh 1vh rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  position: relative;
}

.test-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #d1fae5;
}

.test-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
  border-radius: 0.6rem 0.6rem 0 0;
}

.test-name {
  font-size: 1.7vh;
  font-weight: 700;
  color: #374151;
  min-width: auto;
  margin-bottom: 0.5vh;
  padding: 0.4vh 0.8vw;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  border-radius: 0.5vw;
  border-left: 0.3vw solid #10b981;
  letter-spacing: 0.025em;
}

.test-values-inline {
  font-size: 1.5vh;
  font-weight: 500;
  color: #1f2937;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  padding: 0.6vh 1vw;
  border-radius: 0.6vw;
  border: 1px solid #a7f3d0;
  box-shadow: 0 0.2vh 0.5vh rgba(16, 185, 129, 0.1);
  font-family: 'Consolas', 'Monaco', monospace;
  width: 100%;
  transition: all 0.2s ease;
}

.test-values-inline:hover {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  transform: scale(1.01);
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.modal-content {
  background-color: var(--bg-secondary);
  border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 1.5rem 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.5rem;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.close-button {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.close-button:hover {
  background-color: #f3f4f6;
  color: var(--text-primary);
}

.modal-body {
  padding: 0 1.5rem;
}

.modal-footer {
  display: flex;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
  justify-content: flex-end;
}

.modal-footer .hmi-button {
  width: auto;
  min-width: 100px;
}

/* 表单样式 */
.form-group {
  margin-bottom: 1.2rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.875rem;
}

.input-wrapper {
  position: relative;
  margin-bottom: 0.5rem;
}

.input-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: 0.875rem;
  z-index: 10;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background-color: white;
  transition: all 0.2s ease;
  color: var(--text-primary);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

.load-facilities-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--accent-green, #10b981);
  color: white;
  border: none;
  border-radius: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.5rem;
  width: auto;
}

.load-facilities-btn:hover:not(:disabled) {
  background-color: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.15);
}

.load-facilities-btn:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- 按钮 --- */
.hmi-button {
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
  width: 100%;
}

.hmi-button i {
  font-size: 1em;
}

.hmi-button-primary {
  background-color: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.hmi-button-primary:hover {
  background-color: #2563eb;
  border-color: #2563eb;
}

.hmi-button-secondary {
  background-color: #6b7280;
  color: white;
  border-color: #6b7280;
}

.hmi-button-secondary:hover {
  background-color: #4b5563;
  border-color: #4b5563;
}

.hmi-button-danger {
  background-color: #dc2626;
  color: white;
  border-color: #dc2626;
}

.hmi-button-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

.hmi-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- 通知提示 --- */
.notification-dialog {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color: var(--bg-secondary);
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  border: 1px solid var(--border-color);
  width: 50%;
  max-width: 360px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9999;
}

.notification-dialog.show {
  opacity: 1;
  visibility: visible;
}

.notification-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.notification-icon {
  font-size: 1.5rem;
  color: var(--text-primary);
}

.notification-message {
  font-size: 1rem;
  color: var(--text-primary);
}

.notification-success {
  background-color: #10b981;
}

.notification-error {
  background-color: #ef4444;
}

.hidden-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 1.7rem;
  color: #10b981;
  opacity: 0.3;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.hidden-icon:hover {
  opacity: 0.6;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .welcome-title {
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
  }
  
  .title-controls {
    margin-left: 0.2rem;
  }
}

@media (max-width: 900px) {
  .welcome-title {
    gap: 0.3rem;
  }
  
  .title-controls {
    gap: 0.25rem;
    margin-left: 0.2rem;
  }
  
  .config-button,
  .auto-refresh-btn {
    padding: 0.28rem 0.45rem;
    font-size: 0.63rem;
  }
}

@media (max-width: 768px) {
  .modal-footer {
    flex-direction: column;
  }
  
  .modal-footer .hmi-button {
    width: 100%;
  }
  
  .welcome-title {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .title-controls {
    gap: 0.3rem;
    margin-left: 0;
    justify-content: center;
  }
  
  .config-button,
  .auto-refresh-btn {
    padding: 0.35rem 0.5rem;
    font-size: 0.65rem;
    gap: 0.25rem;
  }
  
  .process-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  
  .process-item {
    padding: 0.6rem;
  }
  
  .process-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }
  
  .process-value {
    font-size: 0.68rem;
    padding: 0.35rem 0.5rem;
  }
  
  .test-row {
    padding: 0.6rem;
  }
  
  .test-name {
    font-size: 0.75rem;
  }
  
  .test-values-inline {
    font-size: 0.68rem;
    padding: 0.35rem 0.5rem;
  }
  
  .test-list {
    max-height: 220px;
  }
}

@media (max-width: 480px) {
  .welcome-title {
    font-size: 0.85rem;
    flex-direction: column;
    gap: 0.4rem;
  }
  
  .title-controls {
    gap: 0.2rem;
    margin-left: 0;
    justify-content: center;
  }
  
  .config-button,
  .auto-refresh-btn {
    padding: 0.25rem 0.4rem;
    font-size: 0.6rem;
    gap: 0.2rem;
  }
  
  .auto-refresh-indicator {
    font-size: 0.55rem;
    padding: 0.1rem 0.3rem;
    margin-left: 0;
    gap: 0.2rem;
  }
  
  .welcome-card {
    padding: 1.2rem;
    max-width: calc(100vw - 2rem);
    border-radius: 1rem;
  }
  
  .data-source-indicator {
    font-size: 0.6rem;
    padding: 0.15rem 0.4rem;
    margin-left: 0.3rem;
  }
  
  .process-grid {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  
  .process-item {
    padding: 0.5rem;
  }
  
  .process-label {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }
  
  .process-value {
    font-size: 0.65rem;
    padding: 0.3rem 0.4rem;
  }
  
  .device-info {
    padding: 0.8rem;
    margin-bottom: 0.8rem;
  }
  
  .status-info {
    padding: 0 0.8rem;
  }
  
  .test-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    padding: 0.6rem;
  }
  
  .test-name {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    margin-bottom: 0.2rem;
  }
  
  .test-values-inline {
    font-size: 0.65rem;
    padding: 0.3rem 0.4rem;
    width: 100%;
  }
  
  .test-list {
    max-height: 180px;
  }
}
</style>
